import {
  getNews,
  recommend,
  uploadImg,
  getChatRecords,
  getQuestions,
  getQuestionRecords,
} from "./api.js";

$(function () {
  // 测试
  // getNews().then((res) => {
  //   console.log(res);
  // });
  // 接收contentjs的knowledgeid,如果有则显示视频总结按钮
  chrome.runtime.onMessage.addListener((request) => {
    console.log(request.knowledgeId);
    localStorage.setItem("knowledgeId", request.knowledgeId);
    if (request.knowledgeId) {
      $(".summary").css("display", "block");
    } else {
      $(".summary").css("display", "none");
    }
  });
  // 视频内容总结显示
  // $(".summary").click(function () {
  //     $('.su').css({
  //         'display': 'block'
  //     })
  //     var timeout = null
  //     document.getElementById('su').innerText = '...'
  //     timeout = setTimeout(function () {
  //         document.getElementById('su').innerText = ''
  //         var summaryTimer = null
  //         var i = 0
  //         var summaryTextArr = '视频探讨了大学生活的重要性以及如何在大学中培养专业技能和知识。通过海尔集和张瑞敏的例子，阐述了企业管理中柔弱胜刚强的理念。文章呼吁大学生要注重生命启蒙和智慧的追寻，以实更美好、丰富和有趣味的人生。张瑞敏认为无形的东西比有形的东西更重要，引用了老子道德经中的文字来阐有无虚实之间的辩证关系。本文通过绘画、书法、建筑和文学等艺术形式，探讨了其中有无虚实之间的辩证系，并阐述了这种关系融合出的美。中国艺术讲究留白、虚实相生，以无画之处成妙境，以谦虚半付显实处妙，以透风漏目现自然之气韵。文学则以不着一字尽得风流，给人留下无限遐想的空间。通过这些例子，我们会到了有无虚实之间辩证融合出的艺术之美。'.split('')
  //         console.log(summaryTextArr);
  //         summaryTimer = setInterval(function () {
  //             if (summaryTextArr[i]) {
  //                 document.getElementById('su').innerText += summaryTextArr[i]
  //                 i++
  //             } else {
  //                 clearInterval(summaryTimer);
  //                 return
  //             }

  //         }, 50);
  //         $(".su").click(function () {
  //             clearInterval(summaryTimer);
  //             clearTimeout(timeout)
  //         })
  //     }, 1000)
  // })
  // $(".su").click(function () {
  //     $('.su').css({
  //         'display': 'none'
  //     })
  // })
  $(".summary").click(function () {
    layer.msg("未检测到视频，请在其他页面中尝试~", { icon: 0 });
  });

  // 进入页面先查看登录状态
  if (localStorage.getItem("token") && localStorage.getItem("userHeadUrl")) {
    $("#login-head").attr("src", localStorage.getItem("userHeadUrl"));
    $(".appear").css("display", "block");
  } else {
    $("#login-head").attr("src", "img/side-loginhead.png");
    $(".appear").css("display", "none");
  }

  // 点击打开登录页
  $(".login").click(function () {
    var createData = {
      url: "loginPage.html",
    };
    chrome.tabs.create(createData);
  });
  // 点击打开首页
  $(".side-logo1").click(function () {
    var createData = {
      url: "../officialWebsites/index.html",
    };
    chrome.tabs.create(createData);
  });

  //------------------------聊天------------------------
  // 内容框切换
  $(".news").click(function () {
    $(".main").css({
      display: "block",
    });
    $(".message").css({
      display: "block",
    });
    $(".main-recommend").css({
      display: "none",
    });
    $(".main-history").css({
      display: "none",
    });
    $(".appear").css({ display: "block" });
    // 清空元素
    $(".main-recommend").empty();
    $(".main-history").empty();
    // 切换图标样式
    $(".news-pic").attr("src", "img/side-news1.png");
    $(".recommend-pic").attr("src", "img/side-recommend.png");
    $(".history-pic").attr("src", "img/side-history.png");
  });
  // 发送聊天消息
  $(".mes-btn").click(async function () {
    if (!localStorage.getItem("token")) {
      layer.msg("请先登录", { icon: 0 });
      return;
    }
    // 发送点击行为(有课程id才发,在学习过程中遇到问题)
    if (localStorage.getItem("knowledgeId")) recommend();

    // 问题内容判空
    var send = $(".message-input").val();
    if (!send.trim()) {
      layer.msg("问题不能为空");
      return;
    } else if (send != "") {
      //未选择图片
      if (picSrc == "") {
        $(".main").append('<div class="nr">' + send + "</div>");
      } else {
        //选择了图片
        $(".main").append(
          '<div class="nr">' +
            send +
            '<div class="sendpic"><img id="sendpicture" src="' +
            picSrc +
            '" ></img></div></div>'
        );
      }
      $(".message-input").val("");
      // 取消图片选择（仍旧选择，不在对话框显示）
      picSrc = "";
      $(".pic-btn").css({
        background: "url(../img/side-selectpic.png) no-repeat",
        "background-size": "100% 100%",
      });
      $("#se").attr("src", "img/transparent.png");
    }
    const timeId = new Date().getTime();
    $(".main").append(`<div class="nl" id="${timeId}">...</div>`);
    $(".main").scrollTop(999);

    //文字:send  图片:picUrl  token:token
    var picUrl = "";
    var token = localStorage.getItem("token");

    // 使用FormData提交图片
    let fd = new FormData();
    if (document.querySelector(".select").files[0]) {
      var file = document.querySelector(".select").files[0];
      fd.append("image", file);
    } else if (pastefile) {
      fd.append("image", pastefile);
    } else {
    }
    // SSE流式输出：1.post上传图片拿到url 2.get请求带参文字+图片url
    if (fd.has("image")) {
      var res = await uploadImg({ data: fd });
      picUrl = res.data;
      pastefile = null; //清空粘贴文件
      document.querySelector(".select").value = null;
    }
    var eventSource = new EventSource(
      `http://113.54.243.47:10010/QaA/question?token=${token}&query=${send}&imageUrl=${picUrl}`
    );
    eventSource.addEventListener("open", function (e) {
      // console.log("open successfully");
      $(`#${timeId}`).text("");
    }); //open: 建立连接
    eventSource.addEventListener("message", function (e) {
      // console.log(e.data);
      document.getElementById(timeId).innerText = e.data;
    }); //message：后端返回信息
    eventSource.addEventListener("error", function (err) {
      eventSource.close(); // 关闭
      console.log(err);
    }); //error：错误（可能是断开，可能是后端返回的信息）
  });
  // 选择图片后改变样式并回显
  var picSrc = ""; //用该属性判断是否选择了图片文件
  $(".select").change(function () {
    // console.log($(this).val());
    if ($(this).val() === "") {
      $(".pic-btn").css({
        background: "url(../img/side-selectpic.png) no-repeat",
        "background-size": "100% 100%",
      });
      $("#se").attr("src", "img/transparent.png"); //预览图片的地方换成透明的
      picSrc = "";
    } else {
      $(".pic-btn").css({
        background: "url(../img/side-selected.png) no-repeat",
        "background-size": "100% 100%",
      });
      var reader = new FileReader();
      var file = document.querySelector(".select").files[0];
      reader.readAsDataURL(file); //使用文件读取对象读取图片为base64编码
      reader.onload = function (e) {
        //图片读取成功后触发
        var base64Src = e.target.result; //图片bese64编码
        picSrc = base64Src;
        $("#se").attr("src", picSrc);
      };
    }
  });
  // 监听剪切板粘贴图片事件
  var pasteDate;
  var pastefile;
  $(".message-input").bind("paste", function () {
    pasteDate = event.clipboardData || window.clipboardData;
    // 获取粘贴板最新的文件并判断是否为图片
    pastefile = pasteDate.items[0].getAsFile();
    if (!/\.(jpg|jpeg|png|GIF|JPG|PNG|ico)$/.test(pastefile.name)) {
      return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(pastefile);
    //文件读取完成时触发
    reader.onload = function (e) {
      //图片读取成功后触发
      var base64Src = e.target.result; //图片bese64编码
      picSrc = base64Src;
      $("#se").attr("src", picSrc);
    };
  });
  // 查看聊天历史
  $(".history-chat").click(function () {
    if (!localStorage.getItem("token")) {
      layer.msg("请先登录", { icon: 0 });
      return;
    }
    // 获取聊天历史记录
    getChatRecords()
      .then((res) => {
        $(".history-chat").css({ display: "none" });
        // console.log(res.data.data);
        if (res.data.data.length === 0) {
          $(`.main`).prepend(`<div class="nl">暂无历史记录</div>`);
        }
        for (let i = res.data.data.length - 1; i > -1; i--) {
          $(`.main`).prepend(
            `<div class="nl">${res.data.data[i].answer}</div>`
          );
          if (res.data.data[i].imageUrl !== "NULL") {
            $(`.main`).prepend(
              `<div class="nr">${res.data.data[i].question}<div class="sendpic"><img id="sendpicture" src="${res.data.data[i].imageUrl}" ></img></div></div>`
            );
          } else {
            $(`.main`).prepend(
              `<div class="nr">${res.data.data[i].question}</div>`
            );
          }
        }
        $(`#firstNew`).before(
          '<hr style="color: #ccc;border-bottom: 2px solid #ccc;">'
        );
        $(".main").scrollTop(99999);
      })
      .catch(() => {
        layer.msg("请求失败");
      });
  });

  //------------------------推荐------------------------
  $(".recommend").click(function () {
    if (!localStorage.getItem("token")) {
      layer.msg("请先登录", { icon: 0 });
      return;
    }
    // 内容框切换
    {
      $(".main").css({
        display: "none",
      });
      $(".message").css({
        display: "none",
      });
      $(".main-recommend").css({
        display: "block",
      });
      $(".main-history").css({
        display: "none",
      });
      $(".appear").css({ display: "none" });
      // 清空元素
      $(".main-history").empty();
      $(".main-recommend").empty();
      // 切换图标样式
      $(".news-pic").attr("src", "img/side-news.png");
      $(".recommend-pic").attr("src", "img/side-recommend1.png");
      $(".history-pic").attr("src", "img/side-history.png");
    }
    // 存储推荐题目和答案信息
    var recommendData;
    var userAnswers = [];
    var results = [];
    getQuestions()
      .then((res) => {
        recommendData = res.data.data;
        // 渲染题目
        $(".main-recommend").append(
          `<button class="submit-answer layui-btn layui-btn-primary layui-border-blue">提交答案</button>`
        );
        for (let i = 0; i < recommendData.problems.length; i++) {
          $(".main-recommend").append(
            `<div class="problem po${i}"><div class="question"><span>题目：</span>${recommendData.problems[i]}</div><input type="text" placeholder="请输入你的答案" class="fill an${i} layui-input"></div>`
          );
        }
        // 提交答案
        $(".submit-answer").click(function () {
          $(this).attr("disabled", true);
          // 显示答案
          for (let i = 0; i < recommendData.problems.length; i++) {
            $(`.po${i}`).append(
              `<div class="knowledgePoint"><span>知识点：</span> ${recommendData.knowledgePoints[i]}</div>`
            );
            $(`.po${i}`).append(
              `<div class="answer">答案：${recommendData.answers[i]}</div>`
            );
            userAnswers[i] = $(`.an${i}`).val();
            // 判断答案是否正确
            if ($(`.an${i}`).val() === recommendData.answers[i]) {
              results[i] = 1;
              $(`.an${i}`).css({ border: "1px solid #16b777" });
            } else {
              results[i] = 0;
              $(`.an${i}`).css({ border: "1px solid #ff5722" });
            }
            $(`.an${i}`).attr("disabled", true);
          }
          // 返回回答情况
          storageQuestion({
            userId: recommendData.userId,
            courseId: recommendData.courseId,
            knowledgePoints: recommendData.knowledgePoints,
            problems: recommendData.problems,
            answers: recommendData.answers,
            results: results,
            userAnswers: userAnswers,
          });
        });
      })
      .catch(() => {
        $(".main-recommend").append(`<div">暂无推荐</div>`);
      });
  });

  //------------------------历史记录------------------------
  $(".history").click(function () {
    if (!localStorage.getItem("token")) {
      layer.msg("请先登录", { icon: 0 });
      return;
    }
    // 内容框切换
    {
      $(".main").css({
        display: "none",
      });
      $(".message").css({
        display: "none",
      });
      $(".main-recommend").css({
        display: "none",
      });
      $(".main-history").css({
        display: "block",
      });
      $(".appear").css({ display: "none" });
      // 清空元素
      $(".main-recommend").empty();
      $(".main-history").empty();
      // 切换图标样式
      $(".news-pic").attr("src", "img/side-news.png");
      $(".recommend-pic").attr("src", "img/side-recommend.png");
      $(".history-pic").attr("src", "img/side-history1.png");
    }
    // 获取推荐历史
    getQuestionRecords()
      .then((res) => {
        //存储历史记录
        var historyData = res.data.data;
        for (let i = 0; i < historyData.length; i++) {
          if (historyData[i].isCorrect === 1) {
            $(".main-history").append(
              `<div class="problem"><div class="question"><span>题目：</span>${historyData[i].problems}</div><div class="my-answer" style="color:#16b777">我的答案：${historyData[i].userAnswer}</div><div class="knowledgePoint"><span>知识点：</span>${historyData[i].knowledgePoints}</div><div class="answer">正确答案：${historyData[i].answer}</div></div>`
            );
          } else {
            $(".main-history").append(
              `<div class="problem"><div class="question"><span>题目：</span>${historyData[i].problems}</div><div class="my-answer" style="color:#ff5722">我的答案：${historyData[i].userAnswer}</div><div class="knowledgePoint"><span>知识点：</span>${historyData[i].knowledgePoints}</div><div class="answer">正确答案：${historyData[i].answer}</div></div>`
            );
          }
        }
      })
      .catch(() => {
        $(".main-recommend").append(`<div">暂无历史</div>`);
      });
  });

  //------------------------元宇宙形象------------------------
  $(".appear").click(function () {
    $(".cover").css({ display: "block" });
  });
  $(".cover").click(function () {
    $(".cover").css({ display: "none" });
  });
});
